<template>
	<view class="page">
		
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:up="upOption">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-box top-search-box">
				<uni-search-bar radius="5"
					v-model="searchText"
					placeholder="输入小区名称" 
					clearButton="auto" 
					cancelButton="none"
					@confirm="searchAction" />
			</view>
		
			<view class="list-wrap">
				<view class="list-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
					<view class="list-item__title">
						{{ item.housingName }}
					</view>
					<view class="list-item__content">	
						<view class="list-item__content__text">
							区域信息：{{ item.areaName }}-{{ item.streetName }}-{{ item.communityName }}
						</view>
						<view class="list-item__content__text">
							所在地址：{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import { listHousing } from '@/api/housing/index'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				searchText:'',
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 30 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无数据'
					}
				},
				list: [],
			}
		},
		created() {

		},
		methods: {
			searchAction(e){
				this.downCallback()
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				const params = {
					pageNum: pageNum,
					pageSize: pageSize,
					housingName: this.searchText || ''
				}
				this.$modal.loading("查询中")
				listHousing(params).then((result) => {
					if (pageNum == 1) this.list = [];
					this.list = this.list.concat(result.rows || [])
					this.mescroll.endBySize(result.rows.length, result.total);
				}).catch(() => {
					this.mescroll.endErr();
				}).finally(() => this.$modal.closeLoading())
				
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			itemClick(item){
				this.$store.dispatch('SetCurrentHousing', item).then(() => {
				  this.$tab.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.sticky-box {
			z-index: 990;
			position: sticky;
			top: var(--window-top);
			background-color: #fff;
			box-sizing: border-box;
		}
		.list-wrap {
			box-sizing: border-box;
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			.list-item {
				color: #333;
				background-color: #FFF;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;
				.button-box {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}
				&__time {
					font-size: 28rpx;
				}
				&__content {
					position: relative;
					padding-top: 20rpx;
					&__text {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>